//公用样式 
require('../../assets/css/index.less')
require('../../assets/fonts/iconfont.css') //字体样式

// 当前页面样式
require('./sport-data.less')

//工具函数 utils
const dom = require('../../utils/dom');

//引入axios封装的文件
let https = require('../../utils/https.js');
let echarts = require('../../assets/lib/echarts/echarts.js')






//DOM加载事件
//DOM加载事件
dom.ready(function () {
   //后退
  console.log(echarts+'444');
   document.querySelector('#goBack').addEventListener('click', function () {
    history.go(-1);
});


    // 获取运动数据信息
    function getSportsData() {
        https.get("/api/exercise", function (res) {
            console.log(res);
            let {
                errno,
                data
            } = res;

            //判定
            if (errno == 0) {
                console.log(data.days);
                //渲染网页
                dom.getEle("#sumDurationVal").innerHTML = data.sum7Duration;
                dom.getEle("#sum7CalorieVal").innerHTML = data.sum7Calorie;
                dom.getEle("#sum7Calorie").innerHTML = data.sum7Calorie * 7;
                dom.getEle("#day").innerHTML = Math.ceil(data.sum7Duration / 60 / 24);
                dom.getEle("#series").innerHTML = Math.ceil(data.sum7Duration / 60 / 24);
                //柱状图
                let dateArr = data.days.map(v => {
                    return v.date.slice(5)
                })
                let DurationArr = data.days.map(v => {
                    return v.sumDuration / 60
                })
                drawBar(dateArr, DurationArr)

                //饼状图
                let runningSum = 0;
                let cycling = 0;
                let training = 0
                data.days.map(v => {
                    runningSum += v.exerciseData[0].duration / 60
                    cycling += v.exerciseData[1].duration / 60
                    training += v.exerciseData[2].duration / 60
                })
                drawPie(runningSum, cycling, training)

                //跑步
                let runningArr = data.days.map(v => {
                    return v.exerciseData[0].duration / 60
                })
                //骑行
                let cyclingArr = data.days.map(v => {
                    return v.exerciseData[1].duration / 60
                })
                //训练
                let trainingArr = data.days.map(v => {
                    return v.exerciseData[2].duration / 60
                })

                /* 绘制堆叠条形图 */
                drawStackLine(runningArr, cyclingArr, trainingArr)

                //次数
                let countArr = data.days.map(v => {
                    return v.count
                })
                /* 绘制折线图 */
                drawLine(countArr)
            }
        })
    }
    getSportsData();

    // 近7天时长
    const myChart = echarts.init(dom.getEle("#duration"));
    /* 绘制柱状图 */
    function drawBar(dateArr, date1) {
        const chart = echarts.init(dom.getEle('#duration'))
        const option = {
            title: {
                text: "近7天运动时长",
                textStyle: {
                    fontSize: 14,
                    color: '#333',
                },
                left: 10,
                top: 10,
            },
            xAxis: {
                type: 'category',
                data: dateArr,
                axisLabel: {
                    interval: 0,
                    rotate: 40
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: date1,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220,220,220,0.8)'
                },
                itemStyle: {
                    color: '#83A7D1'
                }
            }]
        }
        chart.setOption(option)
    }
    // drawBar()

    // 运动分类
    /* 绘制饼图 */
    function drawPie(runningSum, cycling, training) {
        const chart = echarts.init(dom.getEle('#sportsType'))
        const option = {
            title: {
                text: '运动分类',
                textStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 20,
                top: 'middle',
                data: ['跑步', '骑行', '训练'],
                icon: 'roundRect',
                itemWidth: 15,
                itemHeight: 15,
            },
            series: [{
                name: '运动分类',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{
                    value: runningSum,
                    name: '跑步',
                    itemStyle: {
                        color: '#58BB92'
                    }
                },
                {
                    value: cycling,
                    name: '骑行',
                    itemStyle: {
                        color: '#736171'
                    }
                },
                {
                    value: training,
                    name: '训练',
                    itemStyle: {
                        color: '#EE5C43'
                    }
                }
                ],
                label: {
                    color: '#fff',
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',
                }
            }]
        }
        chart.setOption(option)
    }



    // 近7日运动分类
    /* 绘制堆叠条形图 */
    function drawStackLine(runningArr, cyclingArr, trainingArr) {
        const chart = echarts.init(dom.getEle('#weekSportsType'))
        const option = {
            title: {
                text: '近七日运动分类',
                textStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['跑步', '骑行', '训练'],
                left: '86%',
                top: 'middle',
                orient: 'vertical',
                itemWidth: 15,
                itemHeight: 15,
            },
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            series: [{
                name: '跑步',
                type: 'bar',
                stack: '总量',
                data: runningArr,
                itemStyle: {
                    color: '#558ED5'
                }
            },
            {
                name: '骑行',
                type: 'bar',
                stack: '总量',
                data: cyclingArr,
                itemStyle: {
                    color: '#93CDDD'
                }
            },
            {
                name: '训练',
                type: 'bar',
                stack: '总量',
                data: trainingArr,
                itemStyle: {
                    color: '#92D050'
                }
            },

            ]
        }
        chart.setOption(option)
    }


    // 近7日训练次数

    /* 绘制折线图 */
    function drawLine(countArr) {
        const chart = echarts.init(dom.getEle('#trainNum'))
        const option = {
            title: {
                text: '近七日训练次数',
                textStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            xAxis: {
                type: 'category',
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: countArr,
                type: 'line',
                itemStyle: {
                    color: '#79C2B3'
                }
            }]
        }
        chart.setOption(option)
    }


})